<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				font-size: 62.5%;
			}
			body{
				font-family: "微软雅黑";
			}
			.container{
				width: 50rem;
				height: 50rem;
				border: 1px solid #cdcdcd;
				background: #CDCDCD;
				cursor: pointer;
			}
			
			.choice{
				width: 36rem;
				height: 3rem;
				border: none;
				outline: none;
				padding: 0 2rem;
				line-height: 3rem;
				background: #FFFFFF;
				box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
				position: relative;
				}
			.select{
				width: 40rem;
				max-height:20rem;
				overflow-y: auto;
				overflow-x: hidden;
				background: #FFFFFF;
				box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
				display: none;
			}
			.select-item{
				width: 36rem;
				padding: 0 2rem;
				margin: 0.5rem 0;
				height: 3rem;
				line-height: 3rem;
				font-size: 1.5rem;
			}
			.select-none{
				width: 36rem;
				padding: 0 2rem;
				height: 3rem;
				line-height: 3rem;
				font-size: 1.5rem;
				background: #FFFFFF;
				display: none;
			}
			.select-item:hover{
				background: #f2f2f2;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<input class="choice" id="chioce"/>
			<div class="select"></div>
			<div class="select-none">暂无匹配项...</div>
		</div>
	
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript" >
			//搜索功能
			var jsons = [
			  {id:1,name:'AAAAAAAAAAAAAAAAAAAAAA'},
			  {id:2,name:'BBBBBBBBBBBBBBBBBBBBBB'},
			  {id:3,name:'CCCCCCCCCCCCCCCCCCCCCC'},
			  {id:4,name:'DDDDDDDDDDDDDDDDDDDDDD'},
			  {id:5,name:'EEEEEEEEEEEEEEEEEEEEEE'},
			  {id:6,name:'FFFFFFFFFFFFFFFFFFFFFF'},
			  {id:7,name:'GGGGGGGGGGGGGGGGGGGGGG'},
			  {id:8,name:'HHHHHHHHHHHHHHHHHHHHHH'},
			]
	         
		    $(function(){
		    	createElements();
		    });
		    
		    function createElements(){
			var html='';
			for(var i=0;i<jsons.length;i++){
				html+='<div class="select-item" pinyin='+jsons[i].name+'>'+jsons[i].name+'</div>';
			}
			
			$(".select").html(html);
			
			//选中值
			$(".select-item").each(function(){
				this.onclick = function(){
				    $(".choice").val($(this).text());
					$(".select").css("display","none");
				}
			})
		}
		
		    //多选框显示与隐藏
		    $(".choice").click(function(){
		    	$(".select").animate({height:'toggle'});
		    })
		   
		//搜索
		function search(){
		  var keyword = $("#chioce").val();
			if(keyword == ""){
				$(".select-item").css("display","block");
			}
			else{
				$(".select-item").each(function(){
					var name = $(this).text();
					if(name.toLowerCase().indexOf(keyword.toLowerCase()) != -1)
					{
						$(this).show();
					}
					else{
						$(this).hide();
					}
				});
				
				
			}
			var count=0;
			var total = $(".select-item").length;
			
			$(".select-item").each(function(){
				if($(this).css("display")=='none'){
					count++;
				}
			})
			
			if(count == total){
				$(".select-none").css("display","block");
				$(".select").css("display","none");
				
			}
			else{
				$(".select-none").css("display","none");
				$(".select").css("display","block");
			}
			
			
		}
		
		$("#chioce").bind('input propertychange',function(){
			search();
			
		})
		
		</script>
	</body>
</html>
